<template>
    <div class="calendar-content">
        <div class="calendar">
            <div class="calendar-item">
                <div class="calendar-left">
                    <button class="lastMonthBtn" @click="clickLastMonth">&lt;</button>
                    <el-calendar style="width: 100%; height: 100%" :first-day-of-week="7" v-model="lastMonth">
                        <template slot="dateCell" slot-scope="{ data }">
                            <div>
                                <span :style="getStyle1(data.day)" style="position: absolute; top: -1%; left: 2%" :class="calc1(data.day)">{{
                                    $moment(data.day).format('D')
                                }}</span>
                                <div style="color: red; position: absolute; top: -10%; left: 3%" :class="holiday1(data.day)">休</div>
                            </div>
                        </template>
                    </el-calendar>
                </div>
                <div class="calendar-center">
                    <el-calendar style="width: 100%; height: 100%" :first-day-of-week="7" v-model="NowMonth">
                        <template slot="dateCell" slot-scope="{ data }">
                            <div>
                                <span :style="getStyle2(data.day)" style="position: absolute; top: -1%; left: 2%" :class="calc2(data.day)">{{
                                    $moment(data.day).format('D')
                                }}</span>
                                <div style="color: red; position: absolute; top: -10%; left: 3%" :class="holiday2(data.day)">休</div>
                            </div>
                        </template>
                    </el-calendar>
                </div>
                <div class="calendar-right">
                    <button class="nextMonthBtn" @click="clickNextMonth">&gt;</button>
                    <el-calendar style="width: 100%; height: 100%" :first-day-of-week="7" v-model="nextMonth">
                        <template slot="dateCell" slot-scope="{ data }">
                            <div>
                                <!-- <span style="position:absolute;top:-1%;left:2%;" :class="calc3(data.day)">{{ $moment(data.day).format('D') }}</span> -->
                                <span :style="getStyle3(data.day)" :class="calc3(data.day)">{{ $moment(data.day).format('D') }}</span>
                                <div style="color: red; position: absolute; top: -10%; left: 3%" :class="holiday3(data.day)">休</div>
                            </div>
                        </template>
                    </el-calendar>
                </div>
            </div>
            <div class="tip">
                注：
                <span class="blue">蓝色</span>字体代表交易日， <span class="red">红色</span>字体代表非交易日，
                <span class="pink">粉色</span>背景表示节假日。查询所得今年以后年度的节假日仅供参考。
            </div>
        </div>

        <div class="calendar-holiday">
            <div class="calendar-list-heard">
                <div class="rectangle"></div>
                <div class="heard-Text">{{ yearSelect }}年度{{ exchanges }}市场节假日一览</div>
            </div>
            <div class="holiday">
                <div v-for="(item, index) in vacationHoliday" :key="index"><i class="el-icon-caret-right"></i>{{ item }}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import moment from 'moment';

@Component({
    name: 'CalendarQueryContent',
})
export default class CalendarQueryContent extends Vue {
    @Prop()
    tradeCalendarList: any;
    @Prop()
    vacationHoliday: any;
    @Prop()
    yearSelect: any;
    @Prop()
    monthSelect: any;
    @Prop()
    exchanges: string;
    showCalendar: boolean = true;
    value = new Date();
    calendarLeft: any = [];
    calendarCenter: any = [];
    calendarRight: any = [];
    holidayLeft: any = [];
    holidayCenter: any = [];
    holidayRight: any = [];
    lastMonth = new Date();
    NowMonth = new Date();
    nextMonth = new Date();

    created() {
        let date = this.timestamp(new Date()).slice(0, 10);
        this.lastMonth = this.getPreMonth(date);
        this.nextMonth = this.getNextMonth(date);
        this.NowMonth = this.timestamp(new Date()).slice(0, 10);
    }
    // 获取上一个月当前日期
    getPreMonth(date) {
        var arr = date.split('-');
        var year = arr[0]; // 获取当前日期的年份
        var month = arr[1]; // 获取当前日期的月份
        var day = arr[2]; // 获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); // 获取当前日期中月的天数
        var year2 = year;
        var month2 = parseInt(month) - 1;
        if (month2 == 0) {
            year2 = parseInt(year2) - 1;
            month2 = 12;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }
        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
    }
    // 获取下一个月当前日期
    getNextMonth(date) {
        var arr = date.split('-');
        var year = arr[0]; // 获取当前日期的年份
        var month = arr[1]; // 获取当前日期的月份
        var day = arr[2]; // 获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); // 获取当前日期中的月的天数
        var year2 = year;
        var month2 = parseInt(month) + 1;
        if (month2 == 13) {
            year2 = parseInt(year2) + 1;
            month2 = 1;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }

        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
    }

    @Watch('tradeCalendarList', { immediate: true, deep: true })
    getCalendarList(newVal, oldVal) {
        this.calendarLeft = [];
        this.calendarCenter = [];
        this.calendarRight = [];
        this.holidayLeft = [];
        this.holidayCenter = [];
        this.holidayRight = [];
        if (newVal[0]) {
            for (var i = 0; i < newVal[0].days.length; i++) {
                if (newVal[0].days[i].tradeDay == true) {
                    this.calendarLeft.push(newVal[0].days[i].date);
                }
                if (newVal[0].days[i].holiday == true) {
                    this.holidayLeft.push(newVal[0].days[i].date);
                }
            }
            for (var j = 0; j < newVal[1].days.length; j++) {
                if (newVal[1].days[j].tradeDay == true) {
                    this.calendarCenter.push(newVal[1].days[j].date);
                }
                if (newVal[1].days[j].holiday == true) {
                    this.holidayCenter.push(newVal[1].days[j].date);
                }
            }
            for (var k = 0; k < newVal[2].days.length; k++) {
                if (newVal[2].days[k].tradeDay == true) {
                    this.calendarRight.push(newVal[2].days[k].date);
                }
                if (newVal[2].days[k].holiday == true) {
                    this.holidayRight.push(newVal[2].days[k].date);
                }
            }
        }
    }
    // 点击日历上一个月按钮事件
    clickLastMonth() {
        this.lastMonth = this.getPreMonth(this.lastMonth);
        this.nextMonth = this.getPreMonth(this.nextMonth);
        this.NowMonth = this.getPreMonth(this.NowMonth);
        this.$parent.monthSelect =
            this.timestamp(this.NowMonth).slice(5, 6) == 0 ? this.timestamp(this.NowMonth).slice(6, 7) : this.timestamp(this.NowMonth).slice(5, 7);
        this.$parent.yearSelect = Number(this.timestamp(this.NowMonth).slice(0, 4));
    }
    // 点击日历下一个月按钮事件
    clickNextMonth() {
        this.lastMonth = this.getNextMonth(this.lastMonth);
        this.nextMonth = this.getNextMonth(this.nextMonth);
        this.NowMonth = this.getNextMonth(this.NowMonth);
        this.$parent.monthSelect =
            this.timestamp(this.NowMonth).slice(5, 6) == 0 ? this.timestamp(this.NowMonth).slice(6, 7) : this.timestamp(this.NowMonth).slice(5, 7);
        this.$parent.yearSelect = Number(this.timestamp(this.NowMonth).slice(0, 4));
    }
    // 监听日历修改
    @Watch('NowMonth', { immediate: true, deep: true })
    getMonthSelect(newVal, oldVal) {
        if (oldVal != undefined) {
            this.$nextTick(() => {
                this.$parent.getCalendarTypeList(this.$parent.exchangeType, this.$parent.yearSelect, this.$parent.monthSelect);
            });
        }
    }

    @Watch('monthSelect')
    onMonthSelect(newVal, oldVal) {
        let same =
            this.timestamp(this.NowMonth).slice(5, 6) == 0 ? this.timestamp(this.NowMonth).slice(6, 7) : this.timestamp(this.NowMonth).slice(5, 7);
        if (newVal != same) {
            if ([1, 3, 5, 7, 8, 10, 12].includes(newVal)) {
                this.NowMonth = this.yearSelect + '-' + (newVal < 10 ? '0' + newVal : newVal) + '-' + this.timestamp(this.NowMonth).slice(8, 10);
            } else if ([4, 6, 9, 11].includes(newVal)) {
                this.NowMonth =
                    this.yearSelect +
                    '-' +
                    (newVal < 10 ? '0' + newVal : newVal) +
                    '-' +
                    (this.timestamp(this.NowMonth).slice(8, 10) == '31' ? '30' : this.timestamp(this.NowMonth).slice(8, 10));
            } else if (newVal == 2) {
                let days = this.getMonthDay(this.yearSelect, newVal);
                if (this.timestamp(this.NowMonth).slice(8, 10) < 28) {
                    this.NowMonth = this.yearSelect + '-02' + '-' + this.timestamp(this.NowMonth).slice(8, 10);
                } else {
                    if (days == 28) {
                        this.NowMonth = this.yearSelect + '-02' + '-' + '28';
                    } else if (days == 29) {
                        this.NowMonth = this.yearSelect + '-02' + '-' + '29';
                    }
                }
            }
            this.lastMonth = this.getPreMonth(this.NowMonth);
            this.nextMonth = this.getNextMonth(this.NowMonth);
        }
    }
    @Watch('yearSelect')
    onYearSelect(newVal, oldVal) {
        if (newVal != this.NowMonth.slice(0, 4)) {
            this.lastMonth = newVal + '-' + this.lastMonth.slice(5, 10);
            this.nextMonth = newVal + '-' + this.nextMonth.slice(5, 10);
            this.NowMonth = newVal + '-' + this.NowMonth.slice(5, 10);
        }
    }

    // 计算年月日时分的函数
    timestamp(date) {
        // shijianchuo是整数，否则要parseInt转换
        var time = new Date(date);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);
    }
    add0(m) {
        return m < 10 ? '0' + m : m;
    }

    calc1(value) {
        if (this.calendarLeft.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return 'colorBlue';
        }
        return 'colorRed';
    }
    calc2(value) {
        if (this.calendarCenter.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return 'colorBlue';
        }
        return 'colorRed';
    }
    calc3(value) {
        if (this.calendarRight.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return 'colorBlue';
        }
        return 'colorRed';
    }
    holiday1(value) {
        if (this.holidayLeft.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return '';
        }
        return 'holidayColor';
    }
    holiday2(value) {
        if (this.holidayCenter.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return '';
        }
        return 'holidayColor';
    }
    holiday3(value) {
        if (this.holidayRight.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return '';
        }
        return 'holidayColor';
    }
    getStyle1(value) {
        if (this.holidayLeft.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return {
                position: 'absolute',
                top: '-1%',
                left: '2%',
                background: '#eee1e4',
            };
        }
        return {
            position: 'absolute',
            top: '-1%',
            left: '2%',
        };
    }
    getStyle2(value) {
        if (this.holidayCenter.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return {
                position: 'absolute',
                top: '-1%',
                left: '2%',
                background: '#eee1e4',
            };
        }
        return {
            position: 'absolute',
            top: '-1%',
            left: '2%',
        };
    }
    getStyle3(value) {
        if (this.holidayRight.indexOf(moment(value).format('YYYYMMDD')) != -1) {
            return {
                position: 'absolute',
                top: '-1%',
                left: '2%',
                background: '#eee1e4',
            };
        }
        return {
            position: 'absolute',
            top: '-1%',
            left: '2%',
        };
    }
    getMonthDay(year, month) {
        let days = new Date(year, month, 0).getDate();
        return days;
    }

    destroyed() {
        this.$parent.vacationHoliday = [];
    }
}
</script>
<style lang="scss" scoped>
.colorRed {
    color: red !important;
    font-weight: bold;
}
.colorBlue {
    color: #4ba4fa !important;
    font-weight: bold;
}
.holidayColor {
    display: none;
}
// .holidayColorIs{}
.calendar-content {
    width: calc(100% - 20px);
    height: calc(100vh - 130px);
    margin: auto;
    background: #f0f8fa;
    // border: 1px solid red;
    overflow: auto;
    .calendar {
        height: 500px;
        // border: 1px solid orange;
        // overflow: hidden;
        .calendar-item {
            width: 100%;
            // height: 90%;
            height: 420px;
            display: flex;
            border: 3px solid #e0f0fa;
            padding: 5px;
            .calendar-left,
            .calendar-center,
            .calendar-right {
                flex: 1;
                overflow: hidden;
                padding: 0 2px;

                // /deep/ .el-calendar .el-calendar__header {
                //     // 头部样式
                //     background: #3f76be;
                //     color: white !important;
                // }
                // /deep/ .el-calendar .el-calendar__body {
                //     // 整体背景色
                //     background: #fcf3d4;
                // }
                /deep/ .el-calendar .el-calendar-table:not(.is-range) {
                    //使不是本月的日期不可点击，不会跳转到其他月份
                    td.next {
                        pointer-events: none;
                    }
                    td.prev {
                        pointer-events: none;
                    }
                    td {
                        pointer-events: none;
                    }
                }
                /deep/ .el-calendar .el-calendar-table .el-calendar-day {
                    height: 40px !important;
                    width: 100%;
                    position: relative;
                    background: #dfeffa;
                    border: 1.5px solid #d0d8da;
                    border-radius: 3px;
                }
                /deep/ .el-calendar .el-calendar-table td {
                    padding: 2px !important;
                }
                /deep/ .el-calendar .el-calendar-table .el-calendar-day span {
                    width: 100% !important;
                    height: 100% !important;
                    display: flex;
                    align-items: center !important;
                    justify-content: center !important;
                    color: #3498ff;
                }
                /deep/ .el-calendar .el-calendar-table .current {
                    border: none;
                }
                /deep/ .el-calendar .el-calendar-table .prev,
                /deep/ .el-calendar .el-calendar-table .next {
                    opacity: 0;
                }
            }
        }
        .tip {
            font-size: 16px;
            color: #999999;
            padding-top: 20px;
            padding-left: 15px;

            span {
                font-size: 16px;
            }

            .blue {
                color: #4ba4fa;
            }
            .red {
                color: red;
            }
            .pink {
                color: #f56c6c;
            }
        }
    }

    .calendar-holiday {
        // height: calc(40vh - 130px);
        height: auto;
        // border: 1px solid green;
        .calendar-list-heard {
            width: calc(100% - 20px);
            height: 38px;
            margin: 50px 10px 5px 10px;
            display: flex;
            border-bottom: 1px solid #e0e6ed;
            margin-top: 10px;
            .rectangle {
                width: 8px;
                height: 21px;
                background: #3498ff;
                margin-top: 5px;
            }
            .heard-Text {
                line-height: 32px;
                font-size: 16px;
                padding-left: 10px;
            }
        }
        .holiday {
            width: 98%;
            margin: 0 auto;
            margin-top: 2.5vh;
            // border: 1px solid black;
            display: flex;
            flex-wrap: wrap;
            div {
                width: 130px;
                // border: 1px solid red;
                font-size: 16px;
                text-align: center;
                margin: 10px 5px;
            }
        }
    }
}
.calendar-left {
    position: relative;
    .lastMonthBtn {
        position: absolute;
        top: 15px;
        left: 20px;
        color: white;
        font-size: 23px;
        border: none;
        background: rgba(222, 222, 222, 0);
    }
    /deep/ .el-calendar .el-calendar__header {
        // 头部样式
        background: #3498ff;
        color: white !important;
        .el-calendar__button-group button:nth-child(1) {
            position: relative;
            // right: 900%;
        }
        .el-calendar__button-group button:nth-child(2),
        .el-calendar__button-group button:nth-child(3) {
            display: none;
        }
        .el-calendar__title {
            color: white;
            font-size: 20px;
            text-align: center;
            position: relative;
            left: 35%;
        }
        .el-button-group {
            position: absolute;
            left: 2%;
            // top: 9.6%;
        }
        .el-button-group::after,
        .el-button-group::before {
            content: unset;
        }

        .el-button-group > .el-button:not(:first-child):not(:last-child) {
            display: none;
        }
        .el-button-group > .el-button:first-child {
            background: rgba(222, 222, 222, 0);
            border: none;
            display: none;
        }
        // .el-button-group > .el-button:first-child:before {
        //     // position: absolute;
        //     // top: 5px;
        //     // // left: -1200%;
        //     // content: '<';
        //     // font-size: 20px;
        //     // color: white;
        // }
        .el-button-group > .el-button:first-child span,
        .el-button-group > .el-button:last-child span {
            display: none;
        }
    }
    /deep/ .el-calendar .el-calendar__body {
        // 整体背景色
        background: #f0f8fa;
    }
}
.calendar-center {
    /deep/ .el-calendar .el-calendar__header {
        // 头部样式
        background: #3f76be;
        color: #fcf3d4 !important;
        .el-calendar__button-group {
            display: none;
        }
        .el-calendar__title {
            color: wheat;
            font-size: 20px;
            text-align: center;
            position: relative;
            left: 35%;
        }
    }
    /deep/ .el-calendar .el-calendar__body {
        // 整体背景色
        background: #fcf3d4;
    }
}
.calendar-right {
    position: relative;
    .nextMonthBtn {
        position: absolute;
        top: 15px;
        right: 20px;
        color: red;
        font-size: 23px;
        color: white;
        border: none;
        background: rgba(222, 222, 222, 0);
    }
    /deep/ .el-calendar .el-calendar__header {
        // 头部样式
        background: #3498ff;
        color: white !important;
        .el-calendar__button-group button:nth-child(1),
        .el-calendar__button-group button:nth-child(2) {
            display: none;
        }
        .el-calendar__title {
            color: white;
            font-size: 20px;
            text-align: center;
            position: relative;
            left: 35%;
        }
        .el-button-group > .el-button:not(:first-child):not(:last-child) {
            display: none;
        }
        .el-button-group > .el-button:last-child {
            background: rgba(222, 222, 222, 0);
            border: none;
            display: none;
        }
        // .el-button-group > .el-button:last-child:before {
        //     position: absolute;
        //     top: -0.5px;
        //     content: '>';
        //     font-size: 20px;
        //     color: white;
        // }
        .el-button-group > .el-button:first-child span,
        .el-button-group > .el-button:last-child span {
            display: none;
        }
    }
    /deep/ .el-calendar .el-calendar__body {
        // 整体背景色
        background: #f0f8fa;
    }
}

.tip1 {
    width: 26px;
    height: 18px;
    border-radius: 7px 7px 7px 2px;
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 12px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 16px;
    z-index: 999;
}
.type1 {
    background: #0fc7c1;
}
.type2 {
    background: #f56c6c;
}
</style>
